import React, { useState, useEffect } from 'react';
import '../MonitoringPanel.css';

interface DeviceRealtimeDataPanelProps {
  // 可以添加从父组件传入的属性
}

// 模拟数据生成函数，根据图片效果设置固定数值
const generateMockData = () => ({
  totalDevices: 826,
  onlineDevices: 298,
  bandwidthCapacity: 227,
  cabinetCount: 96,
  serverCount: 612,
  powerDeviceCount: 22
});

const DeviceRealtimeDataPanel: React.FC<DeviceRealtimeDataPanelProps> = () => {
  const [data, setData] = useState(generateMockData());
  const [isAnimating, setIsAnimating] = useState(false);

  // 模拟数据更新
  useEffect(() => {
    const interval = setInterval(() => {
      setIsAnimating(true);
      setTimeout(() => {
        setData(generateMockData());
        setIsAnimating(false);
      }, 300);
    }, 15000); // 每15秒更新一次数据

    return () => clearInterval(interval);
  }, []);

  return (
    <div className="monitoring-panel">
      <div className="panel-header">
        <h3 className="panel-title">
          设备实时数据
          <span style={{fontSize: '12px', fontWeight: 'normal', marginLeft: '8px', color: 'rgba(116, 182, 255, 0.8)'}}>
            
          </span>
        </h3>
      </div>
      
      <div className="data-grid">
        {/* 第一行数据卡片 */}
        <div className={`data-card ${isAnimating ? 'data-update' : ''}`}>
          <div className="data-label" style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3 4H13V12H3V4Z" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M3 8H13" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M6 4V2" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M10 4V2" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            设备总数/台
          </div>
          <div className="data-value">{data.totalDevices}</div>
        </div>
        
        <div className={`data-card ${isAnimating ? 'data-update' : ''}`}>
          <div className="data-label" style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 2V4" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M12 6L14 8L12 10" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              <circle cx="8" cy="8" r="4" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M2 12H4" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M2 4H4" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M2 8H4" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            在线设备/台
          </div>
          <div className="data-value">{data.onlineDevices}</div>
        </div>
        
        {/* 第二行数据卡片 */}
        <div className={`data-card ${isAnimating ? 'data-update' : ''}`}>
          <div className="data-label" style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3 5H13" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M3 11H13" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M8 8V5" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M8 11V8" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            带宽容量/M
          </div>
          <div className="data-value">{data.bandwidthCapacity}</div>
        </div>
        
        <div className={`data-card ${isAnimating ? 'data-update' : ''}`}>
          <div className="data-label" style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4 3H12V13H4V3Z" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M4 7H12" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M4 11H12" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M8 3V1" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M8 13V15" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            机柜数量/台
          </div>
          <div className="data-value">{data.cabinetCount}</div>
        </div>
        
        {/* 第三行数据卡片 */}
        <div className={`data-card ${isAnimating ? 'data-update' : ''}`}>
          <div className="data-label" style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 6H14V10H2V6Z" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M6 2H10V6H6V2Z" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M6 10V14H10V10H6Z" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M2 2V14H14V2H2Z" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            服务器数量/台
          </div>
          <div className="data-value">{data.serverCount}</div>
        </div>
        
        <div className={`data-card ${isAnimating ? 'data-update' : ''}`}>
          <div className="data-label" style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4 3H12V13H4V3Z" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M7 7H9" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M7 10H9" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M8 3V1" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M8 13V15" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M6 5H10" stroke="#74B6FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            电源设备/台
          </div>
          <div className="data-value">{data.powerDeviceCount}</div>
        </div>
      </div>
    </div>
  );
};

export default DeviceRealtimeDataPanel;